<template>
  <div>
    <h3>消息提示</h3>
    
    <div v-if="showMessage" class="message">
      {{ message }}
      <button @click="hideMessage">×</button>
    </div>
    
    <button @click="showSuccessMessage">显示成功消息</button>
    <button @click="showErrorMessage">显示错误消息</button>
  </div>
</template>

<script setup>
import { useTimeout } from '@vueuse/core'
import { ref } from 'vue'

const message = ref('')
const showMessage = ref(false)

let timeoutControls = null

const showSuccessMessage = () => {
  message.value = '操作成功！'
  showMessage.value = true
  
  // 3秒后自动隐藏
  if (timeoutControls) {
    timeoutControls.stop()
  }
  
  timeoutControls = useTimeout(3000, {
    callback: () => {
      showMessage.value = false
    }
  })
}

const showErrorMessage = () => {
  message.value = '发生错误，请重试！'
  showMessage.value = true
  
  if (timeoutControls) {
    timeoutControls.stop()
  }
  
  // 错误消息显示5秒
  timeoutControls = useTimeout(5000, {
    callback: () => {
      showMessage.value = false
    }
  })
}

const hideMessage = () => {
  showMessage.value = false
  if (timeoutControls) {
    timeoutControls.stop()
  }
}


</script>

<style scoped>
.message {
  padding: 10px;
  margin: 10px 0;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #f0f8ff;
}
</style>